<template>
	<div class="orderhead">
		<main>
			<div class="top">
				<i class="iconfont icon-zuojiantou" @click="this.$router.go(-1)"></i>
				<h1 @click="oshow=!oshow">{{oList[oIndex]}}
					<i :class="['iconfont','icon-xiajiantou',{'xuanzhuan1':oshow},{'xuanzhuan2':!oshow}]"></i>
				</h1>
				<i></i>
			</div>
			<div class="bottom">
				<div class="order-type" v-if="oshow">
					<ul>
						<li v-for="(item,index) in oList" 
						:class="{'check':oIndex==index}"
						:key="index" @click="oIndex=index">{{item}}</li>
					</ul>
				</div>
				<div class="type-list" v-else>
					<ul>
						<li v-for="(item,index) in tList[oIndex]" 
							:class="{'default':tIndex==index}" 
							:key="index" @click="tIndex=index">
							{{item}}
						</li>
					</ul>
				</div>
			</div>
		</main>
	</div>
</template>

<script>
export default{
	name:'OrderHead',
	data(){
		return {
			oshow:false,
			oIndex:0,//订单类型
			oList:['全部订单','旅游订单','集市订单','户外卡订单','签证订单','房券订单','线路预售券订单','优惠券订单'],
			tIndex:0,//订单状态
			tList:[
				['全部','待付款','已付款','待评价','退款/售后'],
				['全部','待付款','报名成功','替补','待评价'],
				['全部','待付款','待发货','待收货','待评价'],
				['全部','支付成功','待支付','已关闭'],
				['全部','待付款','待出签','待收货','待评价'],
				['全部','待付款','待预约','待出行'],
				['全部','待支付','已付款','已完成'],
				['全部','待付款','已付款']
			]
		}
	},
	watch:{
		oIndex(){
			this.tIndex = 0;
			this.oshow=!this.oshow;
			this.$store.commit('sload');
			this.$store.commit('hload');
		},
		tIndex(){
			this.$store.commit('sload');
			this.$store.commit('hload');
		},
		oshow(){
			this.$emit('ChangeshowBlak');
		}
	}
}
</script>

<style scoped>
.orderhead{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	width: 100%;
	overflow: hidden;
}
.orderhead main{
	width: 100%;
	margin: 0 auto;
}
.orderhead main .top{
	padding: 0.4rem 0.3rem 0.4rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: white;
}
.orderhead main .top h1{
	font-size: 0.45rem;
	font-weight: bold;
	display: flex;
	align-items: center;
}
.orderhead main .bottom{
	width: 100%;
}
.orderhead main .bottom .type-list{
	/* display: none; */
	padding: 0 0.4rem 0.2rem;
	background-color: white;
}
.orderhead main .bottom .type-list ul{
	width: 100%;
	font-size: 0.35rem;
	padding-bottom: 0.2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.orderhead main .bottom .type-list ul li{
	position: relative;
}
.orderhead main .bottom .type-list ul .default::after{
	content: '';
	position: absolute;
	font-weight: bold;
	left: 0;
	bottom: -0.15rem;
	width: 100%;
	height: 0.08rem;
	border-radius: 0.04rem;
	background: #ffd800;
}

.orderhead main .bottom .order-type{
	background-color: white;
	padding: 0 0.2rem 0.2rem;
}
.orderhead main .bottom .order-type ul{
	display: flex;
	flex-wrap: wrap;
}
.orderhead main .bottom .order-type ul li{
	font-size: 0.3rem;
	padding: 0 0.3rem;
	line-height: 0.7rem;
	margin: 0.1rem 0.2rem;
	border-radius: 0.1rem;
	background-color: #f0f0f0;
}
.orderhead main .bottom .order-type ul .check{
	background-color: #fff109;
}
.xuanzhuan1{
	animation: 0.2s xuanzhuan1 linear forwards;
}
.xuanzhuan2{
	animation: 0.2s xuanzhuan2 linear forwards;
}
@keyframes xuanzhuan1{
	from{transform: rotate(0deg);}
	to{transform: rotate(180deg);}
}
@keyframes xuanzhuan2{
	from{transform: rotate(180deg);}
	to{transform: rotate(0deg);}
}
</style>
